<!-- 活跃用户 -->
<template>
  <div class="smallPieCmp">
    <div class="left-charts-box">
      <chart
        :options="pie"
        ref="pie"
        auto-resize
      />
      <div class="text-box">
        <template v-if="total">
          {{pieData.length / total * 100 | formatNumber}}%
        </template>
        <template v-else>0%</template>
      </div>
    </div>
    <div class="desc-box">
      <p class="label">{{pieData.name}}</p>
      <div class="size"><span>{{pieData.length}}</span>个</div>
    </div>
  </div>
</template>

<script>
import Echarts from "vue-echarts/components/ECharts";
import "echarts/lib/chart/pie";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import 'zrender/lib/svg/svg';
let echarts1 = require("echarts/lib/echarts");
export default {
  name: "smallPie",
  props: {
    pieData: Object,
    total: Number
  },
  data() {
    return {
      pie: {
        series: [
          {
            type: "pie", // 系列1类型: 饼图
            center: ["50%", "50%"], // 饼图的中心(圆心)坐标，数组的第一项是横坐标，第二项是纵坐标。[ default: ['50%', '50%'] ]
            radius: ["78%", "100%"], // 饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
            // 可以将内半径设大显示成圆环图（Donut chart）。
            clockWise: true, // 饼图的扇区是否是顺时针排布。[ default: true ]
            startAngle: 90, // 起始角度，支持范围[0, 360]。 [ default: 90 ]
            hoverAnimation: false, // 是否开启 hover 在扇区上的放大动画效果。[ default: true ]
            avoidLabelOverlap: false,
            selectedOffset: 0,
            labelLine: {
              // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线。
              show: false
            },
            itemStyle: {
              borderWidth: 3,
            },
            data:[]
          }
        ]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setPieData()
    })
  },
  components: {
    chart: Echarts
  },
  filters: {
    formatNumber(number){
      return Math.round(number)
    }
  },
  computed: {
  },
  watch:{
    pieData:{
      handler(newVal){
        this.setPieData()
      },
      deep: true
    }
  },
  methods: {
    setPieData(){
      let self = this
      this.pie.series[0].data = []
      this.$nextTick(() => {
        let currentData = {
          value: this.pieData.length,
          itemStyle: {
            color: new echarts1.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0, color: this.pieData.colors.start
            }, {
              offset: 1, color: this.pieData.colors.end
            }], false),
          },
          selected: true
        }
        let notActivityData = {
          value: this.total - this.pieData.length,
          itemStyle: {
            color: 'rgba(229,229,229,.38)'
          },
          emphasis: {
            itemStyle: {
              color: 'rgba(229,229,229,.38)'
            }
          }
        }
        this.pie.series[0].data.push(currentData)
        this.pie.series[0].data.push(notActivityData)  
        setTimeout(() => {
          if(self.$refs.pie){
        
            self.$refs.pie.mergeOptions(self.pie) 
          }
        },300)
          
      })
      
    }
  },
};
</script>

<style lang="scss">
  .smallPieCmp {
    height: 70px;
    
    display: flex;
    align-content: center;
    .left-charts-box {
      position: relative;
      .echarts {
        width: 70px;
        height: 70px;
      }
      .text-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #666;
        font-family:Helvetica;
        white-space: nowrap;
        font-size: 12px;
      }
    }
    .desc-box {
      margin-left: 12px;
      font-size: 12px;
      color: #666;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .size {
        margin-top: 11px;
        span {
          margin-right: 8px;
        }
      }
    }
  }
  

</style>
